<template>
  <div id="app">
     <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="编号"
      width="120">
      <template slot-scope="scope">
        <span>{{ scope.row.id }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="注册日期"
      width="180">
      <template slot-scope="scope">
        <span>{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="180">
      <template slot-scope="scope">
        <span>{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="手机号"
      width="180">
      <template slot-scope="scope">
        <span>{{ scope.row.phone }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="常用地址"
      width="280">
      <template slot-scope="scope">
        <span>{{ scope.row.address }}</span>
      </template>
    </el-table-column>

    <el-table-column label="操作">
      <template slot-scope="scope">
        <!-- <router-link to="/edit"> -->
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <!-- </router-link> -->
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
    
  </el-table>


<el-dialog title="编辑信息" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="手机号" :label-width="formLabelWidth">
      <el-input style="width:300px;" v-model="form.phone" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="地址" :label-width="formLabelWidth">
      <el-input style="width:300px;" v-model="form.address" auto-complete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirm">确 定</el-button>
  </div>
</el-dialog>
 <p>{{author}}</p>
    <!-- <router-view></router-view> -->

  </div>
</template>

<script>
export default {
    data() {
      return {
        tableData: [{
          id: '001',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          phone: '13612914754'
        },
        {
          id: '002',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          phone: '15612914754'
        },
        {
          id: '003',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          phone: '18612914754'
        }],
        index: "",
        dialogFormVisible: false,
        form: {
          phone: '',
          address: ''
          
        },
       
        formLabelWidth: '120px'
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row.phone);
        this.index = index;
        this.form.phone = row.phone;
        this.form.address = row.address;
        this.dialogFormVisible = true
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      confirm () {
          console.log(this.form);
          let num = this.index;
          console.log(this.tableData[num].phone);
          this.tableData[num].phone = this.form.phone;
          this.tableData[num].address = this.form.address;
          this.dialogFormVisible = false
      }
    },
    computed: {
        author () {
            return this.$store.state.author
        }
    }
  }
</script>

<style>


</style>